<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单数据Excel导入导出系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .content {
            padding: 40px;
        }
        
        .section {
            margin-bottom: 40px;
            padding: 30px;
            border: 2px solid #f0f0f0;
            border-radius: 10px;
            background: #fafafa;
        }
        
        .section h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.8em;
            border-bottom: 3px solid #4CAF50;
            padding-bottom: 10px;
        }
        
        .button-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            min-width: 120px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
            color: white;
        }
        
        .btn-warning {
            background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
            color: white;
        }
        
        .btn-info {
            background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        
        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #4CAF50;
        }
        
        .file-upload {
            position: relative;
            display: inline-block;
            cursor: pointer;
            width: 100%;
        }
        
        .file-upload input[type=file] {
            position: absolute;
            left: -9999px;
        }
        
        .file-upload-label {
            display: block;
            padding: 20px;
            border: 2px dashed #4CAF50;
            border-radius: 8px;
            text-align: center;
            background: #f9f9f9;
            transition: all 0.3s ease;
        }
        
        .file-upload:hover .file-upload-label {
            background: #f0f0f0;
            border-color: #45a049;
        }
        
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            display: none;
        }
        
        .result.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .result.error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .result.info {
            background: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
        
        .filter-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            text-align: center;
            border-left: 4px solid #4CAF50;
        }
        
        .stat-card h3 {
            color: #4CAF50;
            font-size: 2em;
            margin-bottom: 10px;
        }
        
        .stat-card p {
            color: #666;
            font-size: 1.1em;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #4CAF50;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .feature-list {
            list-style: none;
            padding: 0;
        }
        
        .feature-list li {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 30px;
        }
        
        .feature-list li:before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #4CAF50;
            font-weight: bold;
            font-size: 1.2em;
        }
        
        .feature-list li:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📊 订单数据Excel导入导出系统</h1>
            <p>基于EasyExcel和MyBatis-Plus的高效数据处理解决方案</p>
        </div>
        
        <div class="content">
            <!-- 系统特色 -->
            <div class="section">
                <h2>🌟 系统特色</h2>
                <div class="stats">
                    <div class="stat-card">
                        <h3>🚀</h3>
                        <p>高性能处理</p>
                    </div>
                    <div class="stat-card">
                        <h3>📋</h3>
                        <p>数据校验</p>
                    </div>
                    <div class="stat-card">
                        <h3>🔄</h3>
                        <p>批量处理</p>
                    </div>
                    <div class="stat-card">
                        <h3>📊</h3>
                        <p>实时反馈</p>
                    </div>
                </div>
                
                <ul class="feature-list">
                    <li>支持大数据量Excel文件的高效导入导出</li>
                    <li>完善的数据校验机制，确保数据质量</li>
                    <li>分批处理技术，防止内存溢出</li>
                    <li>详细的错误信息反馈和处理结果统计</li>
                    <li>支持多种筛选条件的灵活导出</li>
                    <li>提供标准化的Excel模板下载</li>
                </ul>
            </div>
            
            <!-- 数据导出 -->
            <div class="section">
                <h2>📤 数据导出</h2>
                
                <div class="button-group">
                    <button class="btn btn-primary" onclick="exportAllOrders()">导出所有订单</button>
                    <button class="btn btn-secondary" onclick="downloadTemplate()">下载导入模板</button>
                </div>
                
                <h3 style="margin: 30px 0 15px 0; color: #333;">条件筛选导出</h3>
                <div class="filter-form">
                    <div class="form-group">
                        <label for="exportStatus">订单状态</label>
                        <select id="exportStatus">
                            <option value="">全部状态</option>
                            <option value="PENDING">待处理</option>
                            <option value="PROCESSING">处理中</option>
                            <option value="COMPLETED">已完成</option>
                            <option value="CANCELLED">已取消</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exportUserId">用户ID</label>
                        <input type="number" id="exportUserId" placeholder="输入用户ID">
                    </div>
                    <div class="form-group">
                        <label for="exportTenantId">租户ID</label>
                        <input type="text" id="exportTenantId" placeholder="输入租户ID">
                    </div>
                </div>
                
                <button class="btn btn-warning" onclick="exportOrdersByConditions()">按条件导出</button>
                
                <div id="exportResult" class="result"></div>
            </div>
            
            <!-- 数据导入 -->
            <div class="section">
                <h2>📥 数据导入</h2>
                
                <div class="form-group">
                    <label>选择Excel文件</label>
                    <div class="file-upload">
                        <input type="file" id="importFile" accept=".xlsx,.xls">
                        <label for="importFile" class="file-upload-label">
                            <div style="font-size: 48px; margin-bottom: 10px;">📁</div>
                            <div>点击选择Excel文件或拖拽文件到此处</div>
                            <div style="font-size: 14px; color: #666; margin-top: 10px;">支持 .xlsx 和 .xls 格式</div>
                        </label>
                    </div>
                </div>
                
                <button class="btn btn-info" onclick="importOrders()">开始导入</button>
                
                <div class="loading" id="importLoading">
                    <div class="spinner"></div>
                    <p>正在导入数据，请稍候...</p>
                </div>
                
                <div id="importResult" class="result"></div>
            </div>
            
            <!-- 功能说明 -->
            <div class="section">
                <h2>📖 使用说明</h2>
                
                <h3 style="color: #4CAF50; margin-bottom: 15px;">导出功能</h3>
                <ul class="feature-list">
                    <li><strong>导出所有订单：</strong>一键导出数据库中的所有订单数据</li>
                    <li><strong>条件筛选导出：</strong>根据订单状态、用户ID、租户ID等条件筛选导出</li>
                    <li><strong>下载模板：</strong>获取标准的Excel导入模板，包含示例数据</li>
                </ul>
                
                <h3 style="color: #4CAF50; margin: 30px 0 15px 0;">导入功能</h3>
                <ul class="feature-list">
                    <li><strong>文件格式：</strong>支持.xlsx和.xls格式的Excel文件</li>
                    <li><strong>数据校验：</strong>自动校验必填字段和数据格式</li>
                    <li><strong>批量处理：</strong>采用分批处理技术，支持大文件导入</li>
                    <li><strong>错误反馈：</strong>详细的导入结果统计和错误信息</li>
                </ul>
                
                <h3 style="color: #4CAF50; margin: 30px 0 15px 0;">数据字段说明</h3>
                <ul class="feature-list">
                    <li><strong>订单号：</strong>唯一标识，必填</li>
                    <li><strong>租户ID：</strong>多租户标识</li>
                    <li><strong>用户ID：</strong>用户标识，必填</li>
                    <li><strong>产品名称：</strong>商品名称，必填</li>
                    <li><strong>订单总金额：</strong>数值类型，必填</li>
                    <li><strong>订单状态：</strong>PENDING/PROCESSING/COMPLETED/CANCELLED，必填</li>
                    <li><strong>备注：</strong>可选字段</li>
                </ul>
            </div>
        </div>
    </div>
    
    <script>
        // 导出所有订单
        function exportAllOrders() {
            showResult('exportResult', 'info', '正在导出所有订单数据...');
            
            // 创建下载链接
            const link = document.createElement('a');
            link.href = '/api/excel/export/orders';
            link.download = '订单数据.xlsx';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            setTimeout(() => {
                showResult('exportResult', 'success', '订单数据导出成功！文件已开始下载。');
            }, 1000);
        }
        
        // 下载模板
        function downloadTemplate() {
            showResult('exportResult', 'info', '正在生成导入模板...');
            
            const link = document.createElement('a');
            link.href = '/api/excel/template/orders';
            link.download = '订单数据导入模板.xlsx';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            setTimeout(() => {
                showResult('exportResult', 'success', '导入模板下载成功！请参考模板格式填写数据。');
            }, 1000);
        }
        
        // 按条件导出订单
        function exportOrdersByConditions() {
            const status = document.getElementById('exportStatus').value;
            const userId = document.getElementById('exportUserId').value;
            const tenantId = document.getElementById('exportTenantId').value;
            
            let url = '/api/excel/export/orders/conditions?';
            const params = [];
            
            if (status) params.push(`status=${encodeURIComponent(status)}`);
            if (userId) params.push(`userId=${encodeURIComponent(userId)}`);
            if (tenantId) params.push(`tenantId=${encodeURIComponent(tenantId)}`);
            
            url += params.join('&');
            
            showResult('exportResult', 'info', '正在按条件导出订单数据...');
            
            const link = document.createElement('a');
            link.href = url;
            link.download = '订单数据_筛选.xlsx';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            setTimeout(() => {
                showResult('exportResult', 'success', '条件筛选导出成功！文件已开始下载。');
            }, 1000);
        }
        
        // 导入订单
        function importOrders() {
            const fileInput = document.getElementById('importFile');
            const file = fileInput.files[0];
            
            if (!file) {
                showResult('importResult', 'error', '请先选择要导入的Excel文件！');
                return;
            }
            
            if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')) {
                showResult('importResult', 'error', '文件格式不正确，请选择Excel文件（.xlsx或.xls）！');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', file);
            
            // 显示加载状态
            document.getElementById('importLoading').style.display = 'block';
            document.getElementById('importResult').style.display = 'none';
            
            fetch('/api/excel/import/orders', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('importLoading').style.display = 'none';
                
                if (data.success) {
                    let message = `导入成功！\n成功导入：${data.successCount} 条\n失败：${data.failCount} 条`;
                    if (data.errorMessages && data.errorMessages.length > 0) {
                        message += '\n\n错误详情：\n' + data.errorMessages.slice(0, 5).join('\n');
                        if (data.errorMessages.length > 5) {
                            message += `\n... 还有 ${data.errorMessages.length - 5} 条错误`;
                        }
                    }
                    showResult('importResult', 'success', message);
                } else {
                    showResult('importResult', 'error', `导入失败：${data.message}`);
                }
            })
            .catch(error => {
                document.getElementById('importLoading').style.display = 'none';
                console.error('导入错误:', error);
                showResult('importResult', 'error', '导入过程中发生错误，请检查文件格式和网络连接！');
            });
        }
        
        // 显示结果信息
        function showResult(elementId, type, message) {
            const resultDiv = document.getElementById(elementId);
            resultDiv.className = `result ${type}`;
            resultDiv.innerHTML = message.replace(/\n/g, '<br>');
            resultDiv.style.display = 'block';
            
            // 3秒后自动隐藏info类型的消息
            if (type === 'info') {
                setTimeout(() => {
                    resultDiv.style.display = 'none';
                }, 3000);
            }
        }
        
        // 文件拖拽功能
        document.addEventListener('DOMContentLoaded', function() {
            const fileUpload = document.querySelector('.file-upload-label');
            const fileInput = document.getElementById('importFile');
            
            fileUpload.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#e8f5e8';
            });
            
            fileUpload.addEventListener('dragleave', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#f9f9f9';
            });
            
            fileUpload.addEventListener('drop', function(e) {
                e.preventDefault();
                this.style.backgroundColor = '#f9f9f9';
                
                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    fileInput.files = files;
                    updateFileLabel(files[0].name);
                }
            });
            
            fileInput.addEventListener('change', function() {
                if (this.files.length > 0) {
                    updateFileLabel(this.files[0].name);
                }
            });
            
            function updateFileLabel(fileName) {
                const label = document.querySelector('.file-upload-label');
                label.innerHTML = `
                    <div style="font-size: 48px; margin-bottom: 10px;">📄</div>
                    <div>已选择文件：${fileName}</div>
                    <div style="font-size: 14px; color: #666; margin-top: 10px;">点击重新选择文件</div>
                `;
            }
        });
    </script>
</body>
</html>